<template>
  <v-app id="inspire">
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-snackbar
          v-model="snackbar"
        >
          {{ text }}
          <v-btn
            color="pink"
            text
            @click="closeSnackbar"
          >
            Close
          </v-btn>
        </v-snackbar>
        <v-row
          align="center"
          justify="center"
        >
          <v-col
            cols="12"
            sm="8"
            md="8"
          >
            <v-card class="elevation-12">
              <v-toolbar
                color="primary"
                dark
                flat
              >
                <v-toolbar-title>Login form</v-toolbar-title>
                <v-spacer />
              </v-toolbar>
              <v-card-text>
                <v-form v-model="valid"
                        ref="form"
                >
                  <v-text-field
                    v-model="username"
                    :rules="[v => !!v || 'Item is required']"
                    label="Login"
                    name="login"
                    type="text"
                  />

                  <v-text-field
                    v-model="password"
                    :rules="[v => !!v || 'Item is required']"
                    id="password"
                    label="Password"
                    name="password"
                    type="password"
                  />
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer />
                <v-btn color="primary" @click="login"
                       :disabled="!valid"
                >Login</v-btn>
              </v-card-actions>

            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import store from './../store'
export default {
  props: {
    source: String
  },
  data () {
    return {
      valid: '',
      username: '',
      password: '',
      loading: false,
      showAlert: false,
      snackbar: false,
      text: ''
    }
  },
  methods: {
    closeSnackbar () {
      this.snackbar = false
      if (this.username === 'admin') {
        this.$router.replace({path: '/adminApprove'})
      } else this.$router.replace({path: '/workspace'})
      location.reload()
    },
    login () {
      console.log(this.$refs.form.validate())
      if (store.state.userName != null) { //
        this.text = '已经登陆过了哥'
        this.snackbar = true
        // alert('已经登陆过了哥')
      } else if (!this.$refs.form.validate()) {
        this.text = '表单填写完整'
        this.snackbar = true
      } else {
        this.$axios.post('/login', {
          username: this.username,
          password: this.password
        })
          .then(resp => {
            console.log(resp)
            if (resp.status === 200 && resp.data.hasOwnProperty('token')) {
              this.text = 'login success'
              this.snackbar = true
              this.$store.commit('login', resp.data)
              this.$store.state.userName = this.username
              localStorage.setItem('userName', this.username)
              localStorage.setItem('now', true)
              if(this.username === 'admin'){
                this.$router.replace({path: '/adminApprove'})
              }else this.$router.replace({path: '/workspace'})
              location.reload()
            } else {
              this.text = '密码错误！'
              this.snackbar = true
              // alert(resp.data)
            }
          })
          .catch(error => {
            console.log(error)
            this.text = '用户名不存在'
            this.snackbar = true
            // alert('用户名不存在！')
          })
      }
    }
  }
}
</script>
